<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=], initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table id="box1">
      <tr>
        <td id="id">编号</td>
        <td id="name">姓名</td>
        <td id="mima">密码</td>
        <td id="youxiang">邮箱</td>
        <td id="sj">注册时间</td>
        <td>操作</td>
      </tr>
      <tbody id="body"></tbody>
    </table>

    <script>
      let httpAjax = new XMLHttpRequest();
      let html = "";
      httpAjax.onreadystatechange = function () {
        box1.border = 1
        if (httpAjax.readyState === 4 && httpAjax.status === 200) {
        //   console.log(JSON.parse(httpAjax.responseText));
          let res = JSON.parse(httpAjax.responseText);
          console.log(res.data);
          res.data.forEach((item,index) => {
            html += `<tr>
    <td >${item.id}</td>
    <td >${item.name}</td>
    <td >${item.password}</td>
    <td> ${item.email}</td>
    <td> ${item.created_at}</td>
    <td> <button>查看</button> </td>
</tr>`;
          });
          document.querySelector("#body").innerHTML = html;
        }

      };
      httpAjax.open("GET", "https://liu.zzgoodqc.cn/users", true);
      httpAjax.send();
    </script>
  </body>
</html>
